<template>
    <div class="contentBackground">
        <!-- 搜索 -->
        <div class="searchBard">
            <!-- 第一个搜索框 -->
            <el-input v-model="searchName" placeholder="请输入昵称" style="" class="searchInput">
                <template #prepend>名称</template>
            </el-input>



            <el-button :icon="Search" style="background-color: dodgerblue; color: white;"
                @click="searchClick">搜索</el-button>
            <!-- 带有参数的点击事件 -->
            <!-- <button  @click="testClick(1,'abc',$event)">点击</button> -->
        </div>
        <!-- 表格 -->
        <div>
            <!-- 表格工具栏 -->
            <div class="toolbar">
                <el-button type="primary" @click="isShowCreate = true">添加</el-button>
                <el-button type="danger" @click="batchDelete">删除</el-button>


            </div>
            <!-- 表格数据 -->
            <el-table @select="checkBoxSelect" :data="tableData" :border="true" style="width: 100% ;">
                <!-- 复选框 -->
                <el-table-column type="selection" width="40px" />
                <el-table-column prop="name" label="名称" min-width="180" />
                <el-table-column prop="createdTime" label="创建时间" min-width="180" />
                <el-table-column prop="createdBy" label="创建人" min-width="180" />
                <el-table-column prop="updateBy" label="修改人" min-width="180" />
                <el-table-column prop="updateTime" label="修改时间" min-width="180" />

                <!-- 固定列，操作 -->
                <el-table-column fixed="right" label="操作" min-width="120">
                    <template #default="scope">
                        <el-button link type="primary" size="small"
                            @click="updataClick(scope.$index, scope.row)">编辑</el-button>
                     
                        <el-button link type="primary" size="small" @click="deleteClick(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="toolbar">
                <el-pagination @current-change="changePage" size="small" background layout="prev, pager, next"
                    :total="count" :default-page-size="limit" />
            </div>


            <!-- 添加-弹出页面对话框 -->
            <div>
                <el-dialog v-model="isShowCreate" title="添加用户" width="500px" :close-on-click-modal="false"
                    @close="closeDialog" align-center>
                    <!-- 内容 -->
                    <el-form :model="form" label-width="auto" style="max-width: 600px;padding:40px">
                        <el-form-item label="名称" required>
                            <el-input v-model="form.name" />
                        </el-form-item>


                    </el-form>
                    <template #footer>
                        <div class="dialog-footer">
                            <el-button type="primary" @click="createUser">
                                提交
                            </el-button>
                        </div>
                    </template>
                </el-dialog>
            </div>
            <!-- 修改-弹出对话框页面 -->
            <div>
                <el-dialog v-model="isShowUpdate" title="修改用户" width="500px" :close-on-click-modal="false"
                    @close="closeDialog" align-center>
                    <!-- 内容 -->
                    <el-form :model="form" label-width="auto" style="max-width: 600px;padding:40px">
                        <el-form-item label="名称" required>
                            <el-input v-model="form.name" />
                        </el-form-item>


                    </el-form>
                    <template #footer>
                        <div class="dialog-footer">
                            <el-button type="primary" @click="updataUser">
                                提交
                            </el-button>
                        </div>
                    </template>
                </el-dialog>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onUnmounted, reactive } from 'vue'

console.log("table组件已经创建成功了")

//组件被销毁了
onUnmounted(() => {
    console.log("组件已经被销毁")
})

//表格
//表格数据
const tableData = ref([
    {
        id: '1',
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    }

])
//搜索
import { Search } from '@element-plus/icons-vue'
//引入element-plus的提示框
import { ElMessage } from 'element-plus'
//导入pinia状态管理
import { useSysUserStore } from '../../stores/counter.js'
let userStore = useSysUserStore() //pinia状态管理
let currentUserId = userStore.id
//tokem
let token = userStore.token
//搜索框的名称
let searchName = ref('')


//搜索按钮方法
function searchClick() {
    console.log(searchName.value)
    GetTableDataList(1, searchName.value)
}
let limit = ref(10)
//总条数
let count = ref(0)
//发布异步请求获取表格  数据
import { get, post } from '../../network/index.js'

//获取表格数据
GetTableDataList(1);


//当前表格中复选框已经选择了的数据id数组
let selectIdArr = []
//复选框选择事件
function checkBoxSelect(selection, row) {

    // console.log('复选框选择事件')
    // console.log(selection)
    // console.log(row)

    //被选中的id数组
    selectIdArr = selection.map(itme => itme.id)


}
//操作列

//表格单个数据删除按钮方法
function deleteClick(res) {
    console.log(res.id)
    //发布异步请求获取表格  数据
    post('/ProductAttributeCategory/DeleteProductAttributeCategory', { id: res.id })
        .then(res => {
            //成功提示
            ElMessage.success(res.msg)
            // console.log(res)
            //刷新表格数据
            GetTableDataList(1);
        })
}

//表格多个数据删除按钮方法
function batchDelete(res) {


    //被选中的id数组
    let deleteIdList = selectIdArr
    if (deleteIdList.length != 0) {
        console.log('批量删除按钮', deleteIdList)
        post('/ProductAttributeCategory/BatchDeleteProductAttributeCategory', { idList: deleteIdList })
            .then(res => {
                //成功提示
                ElMessage.success(res.msg)
                // console.log(res)
                //刷新表格数据
                GetTableDataList(1);
            })

    }

}


//分页,页码改变事件
function changePage(page) {
    // console.log('页码改变了')
    // console.log(a)
    GetTableDataList(page);
}

//获取表格数据的方法
function GetTableDataList(page, nick) {
    //发布异步请求获取表格  数据
    get('/ProductAttributeCategory/GetProductAttributeCategoryList', {
        page: page,
        limit: limit.value,
        name: nick,


    }, token).then(res => {
        console.log(res)
        tableData.value = res.data
        //总条数
        count.value = res.count
        // console.log(tableData)

    })
}
// // 带有参数的点击事件
// function testClick(a,b,c){
//   console.log('被点击')
//   console.log(a)
//   console.log(b)
//   console.log(c)
// }

//对话框的显示与隐藏
//是否显示添加对话框
let isShowCreate = ref(false)
//对话框表单的数据
let form = ref({
    name: ''

})

//添加按钮提交表单
function createUser() {
    console.log(form.value)
    // 发布异步请求，添加用户接口
    post('/ProductAttributeCategory/CreateProductAttributeCategory', {
        ...form.value,
        createdBy: currentUserId
    })
        .then((res) => {


            //关闭对话框
            isShowCreate.value = false
            //成功提示
            ElMessage.success(res.msg)
            //刷新表格数据
            GetTableDataList(1);
        }).catch(() => { })
}

//关闭添加对话框后做的事件
function closeDialog() {
    form.value = {
        name: ''
    }
}
//是否显示添加对话框
let isShowUpdate = ref(false)


//创建用于修改的id
let updatauserid = ''
//表格编辑按钮方法,获取编辑数据并赋值
function updataClick(index, data) {
    // console.log('编辑按钮')
    // console.log(index)
    // console.log(data)
    isShowUpdate.value = true
    updatauserid = data.id
    //发布异步请求获取要编辑的个人数据
    get('/ProductAttributeCategory/GetProductAttributeCategoryById', { id: data.id }).then((res) => {
        form.value.name = res.data.name

    }).catch(() => { })

}

//修改提交表单按钮
function updataUser(data) {
    //验证表单数据是否为空
    // if(!form.value.nick){
    //     ElMessage.error('昵称不能为空')
    //     return
    // }
    // if(!form.value.phone){
    //     ElMessage.error('电话不能为空')
    //     return
    // }

    // if(!form.value.phone||!form.value.nick){
    //     ElMessage.error('电话和昵称不能为空')
    //     return
    // }
    if (!(form.value.name)) {
        ElMessage.error('名称不能为空')
        return
    }



    post('/ProductAttributeCategory/UpdateProductAttributeCategory', {
        id: updatauserid,
        name: form.value.name,
        updateBy: currentUserId

    })
        .then((res) => {
            //关闭对话框
            isShowUpdate.value = false
            //成功提示
            ElMessage.success(res.msg)
            //刷新表格数据
            GetTableDataList(1);
        }).catch(() => { })
}


</script>
<style scoped>
/* 内容背景 */
.contentBackground {
    background-color: white;
    padding: 10px;
}

/* 搜索栏 */
.contentBackground .searchBard {
    border: 1px solid #eeeeee;
    padding: 30px;
    margin-bottom: 10px;
}

.contentBackground .searchBard .searchInput {
    width: 300px;
    margin-right: 10px
}

/* 工具栏 */
.contentBackground .toolbar {
    border: 1px solid #eeeeee;
    padding: 10px;
}
</style>